<template>
	<view @touchmove.stop.prevent="returnEvent">
		<u-popup :show="show" @close="close" mode="bottom" round="20">
			<view class="content">
				<view class="op" @click="close"><u-icon size="34" name="close"></u-icon></view>
				<view class="info">
					<image style="background-color: #eaeaea" class="pic" :src="currentItem.picAbsolute == '' ? goodsData.picList[0] : currentItem.picAbsolute"></image>
					<view class="word">
						<view class="price">
							<text v-if="selectArr.length == goodsData.specsDataList.length" style="font-size: 24rpx">￥</text>
							{{ selectArr.length == goodsData.specsDataList.length ? currentItem.salesPrice : goodsData.goodsPrice }}
						</view>
						<view class="p">{{ selectArr.length > 0 ? '已选：' + selectArr.join(',') : '未选规格' }}</view>

						<view class="p" style="color: #999">
							库存：{{ selectArr.length == goodsData.specsDataList.length ? currentItem.availableStock : goodsData.availableStock }}件
						</view>
					</view>
				</view>
				<view class="sku-main">
					<block v-for="(item, skuIndex) in goodsData.specsDataList" :key="skuIndex">
						<view class="sku">
							<view class="tit">{{ item.specsName }}</view>
							<view class="ul">
								<block v-for="(items, index) in item.childs" :key="index">
									<view
										style="
                                            display: -webkit-box;
                                            -webkit-box-orient: vertical;
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;
                                        "
										class="li"
										@click="specificationBtn(items.specsName, skuIndex, index)"
										:class="subIndex[skuIndex] == index ? 'on' : ''"
									>
										{{ items.specsName }}
									</view>
								</block>
							</view>
						</view>
					</block>
					<view class="number" style="padding-top: 40rpx; align-items: center">
						<view style="padding-bottom: 30rpx" class="tit">数量</view>
						<view class="section">
							<view class="minu" @click="doMinus">
								<image v-if="num > 1" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/minu.png" mode=""></image>
								<image v-else src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/minu-disable.png" mode=""></image>
							</view>
							<view class="num"><input type="number" v-model="num" @blur="inputform" /></view>
							<view class="plus" @click="doPlus">
								<image v-if="num < currentItem.availableStock" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/jia.png" mode=""></image>
								<image v-else src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/jia-disable.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view style="height: 140rpx"></view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view style="height: 140rpx"></view>
				<!-- #endif -->
				<view class="footer" @click="goNext()">
					<view class="footer-item" :class="goodsStatus != 1 || stockNum() == 0 ? 'footer-disable' : ''">
						{{ goodsStatus == 1 && stockNum() != 0 ? '确定' : stockNum() == 0 ? '商品无库存' : '商品已下架' }}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'product-sku',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		goodsData: {
			type: Object,
			default: () => {specsDataList: []}
		}
	},
	data() {
		return {
			num: 1,
			skuInfo: [],
			selectArr: [], //当前已选规格数组
			specShowString: '选择规格', //已选规格字符串展示
			currentItem: {
				price: 0,
				availableStock: 0,
				picAbsolute: '',
				salesPrice: 0
			},
			goodsStatus: 1,
			subIndex: []
		};
	},
	methods: {
		close() {
			this.$emit('close');
		},
		stockNum() {
			if (this.goodsData && this.goodsData.specsDataList) {
				return this.selectArr.length == this.goodsData.specsDataList.length ? this.currentItem.availableStock : this.goodsData.availableStock;
			}
		},
		returnEvent() {},
		specificationBtn(specName, specIndex, specItemIndex) {
			if (this.selectArr[specIndex] != specName) {
				this.selectArr[specIndex] = specName;
				this.subIndex[specIndex] = specItemIndex;
				if (this.selectArr.length == this.goodsData.specsDataList.length) {
					var sku = this.selectArr.join(',');
					var form = {
						goodsId: this.goodsData.id,
						specsKey: sku,
						skuCode: sku
					};
					this.goodsData.skuList.forEach(item => {
						if (item.specsKey === sku) {
							this.currentItem.price = item.price;
							this.currentItem.salesPrice = item.salesPrice;
							this.currentItem.availableStock = item.availableStock;
							this.currentItem.picAbsolute = item.picAbsolute;
							this.goodsStatus = item.status;
							if (item.availableStock > 0) {
								this.num = 1;
							}
							if (item.availableStock <= this.num) {
								this.num = item.availableStock;
							}
						}
					});
					// 当某个sku下架的时候 接口会报错
					// this.request
					//     .httpTokenJsonRequest('/mp-api/wx/goods/sku/details', form, 'POST', false)
					//     .then((res) => {
					//         if (res.code == 0) {
					//             this.currentItem.price = res.data.price;
					//             this.currentItem.salesPrice = res.data.salesPrice;
					//             this.currentItem.stock = res.data.stock;
					//             this.currentItem.picAbsolute = res.data.picAbsolute;
					//             this.goodsStatus = 1;
					//         } else {
					//             this.goodsStatus = 0;
					//         }
					//     });
				} else {
					// this.unAvailableSpec(this.selectArr)
				}
			}
			this.$forceUpdate();
		},
		unAvailableSpec() {
			const spec = this.selectArr[0] || this.selectArr[1];
			const unAvailable = this.goodsData.skuList.filter(item => {
				return item.status === 0 && item.specsKey.split(',').indexOf(spec) >= 0;
			});
			if (unAvailable.length > 0) {
				const unAvailableSpec = new Set();
				unAvailableSpec.add(spec);
				//筛选出要禁用的
				unAvailable.forEach(item => {
					item.specsKey.split(',').forEach(spec2 => {
						unAvailableSpec.add(spec2);
					});
				});
				//如果禁用，则禁用选择按钮
				unAvailableSpec.delete(1);
			}
		},
		doMinus() {
			if (this.num > 1) {
				this.num--;
			}
		},
		inputform(e) {
			let value = e.detail.value.replace(/[^\d]/g, '');

			const availableStock = this.selectArr.length == this.goodsData.specsDataList.length ? this.currentItem.availableStock : this.goodsData.availableStock;
			if (value > availableStock) {
				value = availableStock;
			}
			this.num = value;
		},
		doPlus() {
			if (this.currentItem.availableStock > this.num) {
				this.num++;
			}
		},
		goNext() {
			if (this.goodsData.specsDataList.length != this.selectArr.length) {
				uni.showToast({
					icon: 'none',
					title: '请选择规格'
				});
				return;
			}
			if (this.goodsStatus == 0 || this.currentItem.availableStock == 0) {
				return;
			}
			if (this.num == 0) {
				uni.showToast({
					icon: 'none',
					title: '购买数量不能为0'
				});
				return;
			}
			if (this.currentItem.availableStock < this.num) {
				uni.showToast({
					icon: 'none',
					title: '库存不足'
				});
				return;
			}
			var orderData = {
				number: this.num,
				specsKey: this.selectArr.join(','),
				name: this.goodsData.name,
				price: this.currentItem.price,
				picAbsolute: this.currentItem.picAbsolute,
				goodsId: this.goodsData.id
			};
			this.$emit('goNext', orderData);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	max-height: 75%;
	box-sizing: border-box;
	bottom: 0;
	background: #fff;
	position: relative;
	padding: 40rpx 0px 20rpx;
	border-radius: 20rpx 20rpx 0 0;
}
.content .info {
	width: 92%;
	display: flex;
	box-sizing: border-box;
	margin: 0 auto 40rpx;
}
.content .info .pic {
	width: 180rpx;
	margin-right: 20rpx;
	height: 180rpx;
	box-sizing: border-box;
	border-radius: 20rpx;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.content .info .word {
	width: calc(100% - 204rpx);
}
// .sku-main{max-height: 550rpx;overflow-y: scroll;}
.content .info .word .p {
	font-weight: 400;
	font-size: 24rpx;
	color: #666666;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding-bottom: 10rpx;
}
.content .info .word .price {
	color: #ff413b;
	font-size: 48rpx;
	font-weight: 500;
	padding-bottom: 8rpx;
}
.content .op {
	width: 24rpx;
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	height: 24rpx;
}
.content .tit {
	font-weight: 500;
	font-size: 28rpx;
	color: #333;
	padding-bottom: 20rpx;
}
.content .ul {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.content .sku {
	margin: 0 auto;
	width: 92%;
	box-sizing: border-box;
}
.content .number .tit {
	width: 30%;
}
.content .sku .li {
	display: inline-block;
	font-size: 24rpx;
	margin-bottom: 30rpx;
	border-radius: 28rpx;
	margin-right: 30rpx;
	background-color: #f6f6f6;
	text-align: center;
	width: 210rpx;
	color: #333;
	box-sizing: border-box;
	height: 56rpx;
	line-height: 56rpx;
}
.content .sku .on {
	border: 1px solid #009977;
	color: #009977;
	background-color: rgba(0, 153, 119, 0.06);
}
.content .sku .li.ons {
	color: #999;
}
.content .number {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 92%;
	margin: 0 auto 0rpx;
	flex-direction: row;
}
.content .number .section {
	width: 100%;
	display: flex;
	height: 36rpx;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 30rpx;
	box-sizing: border-box;
	flex-direction: row;
}
.content .number .num {
	font-size: 22rpx;
	border-radius: 8rpx;
	background-color: #f6f6f6;
	display: inline-block;
	box-sizing: border-box;
	width: 74rpx;
	text-align: center;
	margin: 0 5rpx;
}
// .content .number .num input{height: 36rpx;line-height: 36rpx;}
.content .number .section image {
	width: 36rpx;
	height: 36rpx;
}
.section .minu {
	display: flex;
	height: 36rpx;
	justify-content: center;
	line-height: 36rpx;
	align-items: center;
}
.section .plus {
	display: flex;
	height: 36rpx;
	justify-content: center;
	line-height: 36rpx;
	align-items: center;
}
.content .sku .li:nth-child(3n) {
	margin-right: 0 !important;
}
.footer-disable {
	background: #c9c9c9;
}
</style>
